<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
      <el-tab-pane label="建筑物" name="0">
        <el-form :model="queryParams" label-width="100px" ref="buildingRef">
          <el-row>
            <el-form-item label="省" prop="provinceId">
              <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="cityId">
              <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区/县" prop="countyId">
              <el-select v-model="queryParams.countyId" placeholder="请选择区/县" @change="chooseCounty" clearable>
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="评估/区划" prop="assessAndQh">
              <el-select v-model="queryParams.assessAndQh" clearable @change="assessChange">
                <el-option label="评估" value="0"></el-option>
                <el-option label="区划" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区划方式" prop="phType" v-if="queryParams.assessAndQh == '1'">
              <el-select v-model="queryParams.phType" clearable @change="phTypeChange">
                <el-option v-for="item in phType" :key="item.name" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="评估方法" prop="assessType">
              <el-select v-model="queryParams.assessType" clearable @change="assessTypeChange">
                <el-option v-for="item in assessType" :key="item.label" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="评估内容" prop="assessObj"
              v-if="queryParams.assessAndQh == '0' || queryParams.phType == '0'">
              <el-select v-model="queryParams.assessObj" clearable>
                <el-option v-for="item in assessObj1" :key="item.label" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="危险性数据" prop="seismicInputMode" v-if="queryParams.assessType == '0'">
              <el-space>
                <el-select v-model="queryParams.seismicInputMode" clearable @change="seismicInputModeChange">
                  <el-option v-for="item in inputMethods('confirm')" :key="item.value" :label="item.name"
                    :value="item.value"></el-option>
                </el-select>
                <el-select v-model="queryParams.condition" v-show="queryParams.seismicInputMode == '0'">
                  <el-option v-for="item in dictData.intensity" :key="item.dictItemId" :label="item.dictItemName"
                    :value="item.dictItemCode" />
                </el-select>
                <el-select v-model="queryParams.condition" v-show="queryParams.seismicInputMode == '1'">
                  <el-option v-for="item in dictData.probability" :key="item.dictItemId" :label="item.dictItemName"
                    :value="item.dictItemCode" />
                </el-select>
              </el-space>
            </el-form-item>
            <!-- <el-form-item label="T年" prop="year" v-if="queryParams.assessType == '1'">
              <el-input v-model.number="queryParams.year" v-inputNumber="0" clearable style="width: 80%">
                <template #append>年</template>
              </el-input>
            </el-form-item> -->
            <el-form-item label-width="0" v-if="isShowDetail">
              <el-checkbox v-model="isShowDetailParams">显示详细查询条件</el-checkbox>
            </el-form-item>
          </el-row>
          <el-row v-if="isShowDetailParams">
            <el-form-item label="破坏程度" prop="damageDegree" v-show="queryParams.assessObj == '0'">
              <el-select v-model="queryParams.damageDegree">
                <el-option v-for="item in dictData.damage" :key="item.dictItemId" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="人员伤亡" prop="casualties" v-show="queryParams.assessObj == '1'">
                <el-select v-model="queryParams.casualties">
                  <el-option v-for="item in dictData.casualties" :key="item.dictItemId" :label="item.dictItemName"
                    :value="item.dictItemCode" />
                </el-select>
              </el-form-item> -->
            <el-form-item label="时间段" prop="time" v-show="queryParams.assessObj == '1' || queryParams.assessObj == '2'">
              <el-select v-model="queryParams.time">
                <el-option v-for="item in dictData.time" :key="item.dictItemId" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="生命线工程" name="1">
        <el-form :model="queryParams" label-width="100px" ref="lifelineRef">
          <el-row>
            <el-form-item label="评估内容" prop="evaluationObject">
              <el-select v-model="queryParams.evaluationObject" clearable>
                <el-option v-for="item in evaluationObject" :key="item.label" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="危险性数据" prop="inputMethod">
              <el-space>
                <el-select v-model="queryParams.inputMethod" clearable @change="seismicInputModeChange">
                  <el-option label="设定烈度" :value="1"></el-option>
                  <el-option label="设定地震影响场" :value="2"></el-option>
                </el-select>
                <el-select v-model="queryParams.condition" v-show="queryParams.inputMethod == 1">
                  <el-option v-for="item in dictData.intensity" :key="item.dictItemId" :label="item.dictItemName"
                    :value="item.dictItemCode" />
                </el-select>
              </el-space>
              <el-form-item label="图件类别" prop="assessObj">
                <el-select v-model="queryParams.assessAndQh" clearable>
                  <el-option label="破坏等级图" value="2"></el-option>
                  <el-option label="失效等级图" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-divider></el-divider>

    <el-row class="mb8" justify="end">
      <el-button type="primary" @click="query">查询</el-button>
      <el-button plain @click="reset">重置</el-button>
    </el-row>

    <el-table :data="dataList" v-loading="loading" stripe>
      <template v-if="activeName == '0'">
        <el-table-column label="任务编号" prop="assessCode" align="center" />
        <el-table-column label="评估方法" prop="assessType" align="center">
          <template #default="{ row }">
            {{ assessType.find(item => item.value == row.assessType)?.name }}
          </template>
        </el-table-column>
        <el-table-column label="评估内容" prop="assessObj" align="center">
          <template #default="{ row }">
            <span>{{ row.assessObj?.split(',').map(obj => assessObj1.find(item => item.value ==
              obj)?.name).join('、') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="危险性数据" prop="seismicInputMode" align="center" width="240px">
          <template #default="{ row }">
            <span>
              {{
                row.seismicInputMode?.split(',').map(item => inputMethods(row.assessType == '0' ? 'confirm' :
                  'probability').find(cur => cur.value == item)?.name).join('、')
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createUserName" align="center" />
      </template>
      <template v-if="activeName == '1'">
        <el-table-column label="任务编号" prop="code" align="center" />
        <el-table-column label="评估内容" prop="evaluationObject" align="center" />
        <el-table-column label="危险性数据" prop="inputMethod" align="center" width="160px" />
        <el-table-column label="创建人" prop="userName" align="center" />
      </template>
      <el-table-column label="评估图件" prop="attachmentInfoEntity" align="center" width="140px">
        <template #default="{ row }">
          <el-button type="text" @click="selectMap(row)">查看</el-button>
          <el-button type="text" @click="uploadImg(row)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="评估结果" align="center" width="140px">
        <template #default="{ row }">
          <el-button type="text" @click="exportResult(row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="paginationData.page"
      v-model:limit="paginationData.rows" @pagination="getList" />
    <el-dialog v-model="openCreate" title="图件查看" width="40%" :before-close="handleClose">
      <div style="margin: 0 0 20px 0;font-size:20px">
        <strong>{{ namePg }}-
          <span v-if="activeName == '0'">{{ nameFs }}-</span>
          {{ nameLd }}
          <span v-if="isShowDetailParams" style="margin-left:30px">
            {{ nameNm }}
          </span>
        </strong>
      </div>
      <div v-if="urlData == ''" class="demo-image__preview" style="text-algin:center">
        还未生成图件
      </div>
      <div v-if="urlData != ''" class="demo-image__preview" style="text-algin:center">
        <el-image style="width: 570px; height: 200px" :src="urlData" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
          :preview-src-list="srcList" :initial-index="4" fit="cover" />
      </div>
      <div v-if="srcList.length > 0" class="demo-image" style="margin: 20px 0 0 0">
        <template v-if="listImage.length > 0">
          <div v-for="(fit, index) in fits" :key="fit" class="block" @click="clickImage(index)">
            <el-image style="width: 100px; height: 100px" :src="listImage[index]" :fit="fit" />
            <span class="demonstration">{{ fit }}</span>
          </div>
        </template>
        <template v-else>
          还未生成图件
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { getDict } from '@/api/system/dict.js'
import { getPage } from '@/api/searchExport/calculateExport'
import { CODE, assessType, assessObj1, inputMethods, assessObj } from '@/views/building'
import { getMaps, downloadMaps } from '@/api/drawingView/index.js'
import { evaluationObject } from '@/views/lifelineProject'
import { getValidDictItemsByDictCode } from "@/api/map/basicDataManage/dzysxData.js";
import { getPage as getLifePage } from '@/api/lifelineProject/taskManage.js'

const { proxy } = getCurrentInstance()
const activeName = ref('0')
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const fits = ref([])
const srcList = ref([])
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  })
}
function chooseProvince(value) {
  queryParams.value.cityId = null
  queryParams.value.countyId = null
  queryParams.value.city = null
  queryParams.value.county = null
  queryParams.value.province = provinceData.value.find(item => item.id == value)?.name
  cityData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
function handleClose() {
  openCreate.value = false
}
const openCreate = ref(false)
const urlData = ref('')
const listImage = ref([])
const namePg = ref('')
const nameFs = ref('')
const nameLd = ref('')
const nameNm = ref('')
function selectMap(row) {
  let params
  if (activeName.value == '0') {
    params = {
      id: row.id, // 任务id
      assessAndQh: queryParams.value.assessAndQh, // 0为评估1为区划2生命线破坏等级分析图/3生命线功能失效分析图
      assessType: queryParams.value.assessType, // 评估方法 0为确定评估1为概率评估
      assessObj: queryParams.value.assessObj, // 评估内容0为结构破坏,1为人员受伤,2为人员死亡,3为经济损失
    }
  } else {
    params = {
      id: row.id, // 任务id
      assessAndQh: queryParams.value.assessAndQh, // 0为评估1为区划2生命线破坏等级分析图/3生命线功能失效分析图
      assessObj: queryParams.value.assessObj, // 评估内容0为结构破坏,1为人员受伤,2为人员死亡,3为经济损失
    }
  }
  if (queryParams.value.assessAndQh == '1') {
    params.qhType = queryParams.value.qhType // 区划方式 0为单指标区划,1为综合指标区划
  }
  if (queryParams.value.assessType == '0') {
    // 危险性数据方式0为设定烈度1为四个概率,2为地震影响场,3为发生概率危险性,4为超越概率危险性
    params.seismicInputMode = queryParams.value.seismicInputMode
    params.damageDeconditiongree = queryParams.value.condition // 确定评估 条件
  } else {
    params.year = queryParams.value.year // 概率评估 t年
  }
  if (isShowDetailParams.value) { /**详细查询条件*/
    if (queryParams.value.assessObj == '0') {
      params.damageDegree = queryParams.value.damageDegree // 破坏程度
    } else if (queryParams.value.assessObj == '1') {
      params.time = queryParams.value.time // 黑天或白天
    }
  }
  fits.value = []
  srcList.value = []
  listImage.value = []
  urlData.value = ''
  getMaps(params).then(res => {
    debugger
    if (activeName.value == '0') {
      namePg.value = assessType.find(item => item.value == queryParams.value.assessType).name
      nameFs.value = assessObj1.find(item => item.value == queryParams.value.assessObj).name
      if (queryParams.value.seismicInputMode == '0') {
        nameLd.value = dictData.value.intensity.find(item => item.dictItemCode == queryParams.value.condition).dictItemName
      } else {
        // nameLd.value = dictData.value.probability.find(item => item.dictItemCode == queryParams.value.condition).dictItemName
        nameLd.value = queryParams.value.year
      }
      if (isShowDetailParams.value) {
        if (queryParams.value.assessObj == '0') {
          nameNm.value = dictData.value.damage.find(item => item.dictItemCode == queryParams.value.damageDegree).dictItemName
        } else if (queryParams.value.assessObj == '1' || queryParams.value.assessObj == '2') {
          nameNm.value = dictData.value.time.find(item => item.dictItemCode == queryParams.value.time).dictItemName
        }
      }
    } else {
      namePg.value = evaluationObject.find(item => item.value == queryParams.value.evaluationObject).name
      nameLd.value = dictData.value.intensity.find(item => item.dictItemCode == queryParams.value.condition).dictItemName
    }
    for (let i = 0; i < res.data.length; i++) {
      let nameList
      if (activeName.value == '0') {
        if (queryParams.value.assessObj == '0') {
          nameList = allDictArray.value[0].dictItems.find(item => item.dictItemCode == res.data[i].destroy)
          fits.value.push(nameList.dictItemName)
        } else if (queryParams.value.assessObj == '1' || queryParams.value.assessObj == '2') {
          nameList = allDictArray1.value[0].dictItems.find(item => item.dictItemCode == res.data[i].time)
          fits.value.push(nameList.dictItemName)
        }
      }
      let attachId = res.data[i].attachId;
      let url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(attachId) || '';
      srcList.value.push(url)
    }
    if (srcList.value.length > 0) {
      urlData.value = srcList.value[0]
      listImage.value = srcList.value
    }
    openCreate.value = true
  }).catch(error => { })
}
function clickImage(fit) {
  let arr = []
  arr.push(listImage.value[fit])
  for (let i = 0; i < listImage.value.length; i++) {
    if (i != fit) {
      arr.push(listImage.value[i])
    }
  }
  srcList.value = arr
}
//下载图件
function uploadImg(row) {
  let params = {
    id: row.id, // 任务id
    assessAndQh: queryParams.value.assessAndQh, // 0为评估1为区划
    assessType: queryParams.value.assessType, // 评估方法 0为确定评估1为概率评估
    assessObj: queryParams.value.assessObj, // 评估内容0为结构破坏,1为人员受伤,2为人员死亡,3为经济损失
  }
  if (queryParams.value.assessAndQh == '1') {
    params.qhType = queryParams.value.qhType // 区划方式 0为单指标区划,1为综合指标区划
  }
  if (queryParams.value.assessType == '0') {
    // 危险性数据方式0为设定烈度1为四个概率,2为地震影响场,3为发生概率危险性,4为超越概率危险性
    params.seismicInputMode = queryParams.value.seismicInputMode
    params.damageDeconditiongree = queryParams.value.condition // 确定评估 条件
  } else {
    params.year = queryParams.value.year // 概率评估 t年
  }
  if (isShowDetailParams.value) { /**详细查询条件*/
    if (queryParams.value.assessObj == '0') {
      params.damageDegree = queryParams.value.damageDegree // 破坏程度
    } else if (queryParams.value.assessObj == '1') {
      params.time = queryParams.value.time // 黑天或白天
    }
  }
  downloadMaps({...params,assessType:activeName.value=='1'?null:params.assessType}).then(response => {
    let blob = new Blob([response], { type: 'application/zip' })
    let url = window.URL.createObjectURL(blob)
    const link = document.createElement('a') // 创建a标签
    link.href = url
    link.download = '评估结果图件' // 重命名文件
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

function chooseCity(value) {
  queryParams.value.countyId = null
  queryParams.value.county = null
  areaData.value = []
  queryParams.value.city = cityData.value.find(item => item.id == value)?.name
  getChildArea(value).then((response) => {
    areaData.value = response.data
  })
}
function chooseCounty(value) {
  queryParams.value.county = areaData.value.find(item => item.id == value)?.name
}
const phType = ref([
  { name: '单指标风险区划', value: '0' },
  { name: '综合风险区划', value: '1' }
])
const tabChange = () => {
  if (activeName.value == '1') {
    queryParams.value.inputMethod = 1
    queryParams.value.condition = dictData.value.intensity[0].dictItemCode
    queryParams.value.assessAndQh = '2'
    queryParams.value.evaluationObject = '1'
  } else {
    queryParams.value.assessAndQh = '0'
    if (queryParams.value.seismicInputMode == 0) {
      queryParams.value.condition = dictData.value.intensity[0].dictItemCode
    } else if (queryParams.value.seismicInputMode == 1) {
      queryParams.value.condition = dictData.value.probability[0].dictItemCode
    }
    delete queryParams.value.evaluationObject
    delete queryParams.value.inputMethod
  }
  getList()
}

let queryParams = ref({
  assessAndQh: '0',
  assessType: '0',
  phType: null,
  assessObj: '0',
  seismicInputMode: '0',
  // evaluationObject: '1'
})
const isShowDetailParams = ref(false)
watch([() => isShowDetailParams.value, () => queryParams.value.assessObj], () => {
  queryParams.value.damageDegree = ''
  // queryParams.value.casualties = ''
  queryParams.value.time = ''
  if (isShowDetailParams.value) {
    if (queryParams.value.assessObj == '0') {
      getDictData('damage', CODE.phcd, 'damageDegree')
    } else if(queryParams.value.assessObj == '1' || queryParams.value.assessObj == '2') {
      // getDictData('casualties', CODE.rysw, 'casualties')
      getDictData('time', CODE.sjd, 'time')
    }
  }
})

const paginationData = ref({
  page: 1,
  rows: 10
})
const total = ref(0)
const dataList = ref([])
const loading = ref(false)
const indexMethod = index => {
  const { page, rows } = paginationData.value
  return rows * (page - 1) + index + 1
}
// 字典项
const dictData = ref({
  intensity: [],
  probability: []
})
const damageOption = []
const getDictData = (field, code, name, cb) => {
  getDict(code).then(res => {
    if (field == 'damage') {
      damageOption.value = res.data
    }
    if (field == 'damage' && queryParams.value.assessType == '1') {
      dictData.value.damage = res.data.filter((_, index) => index > 0)
    } else {
      dictData.value[field] = res.data
    }
    queryParams.value[name] = dictData.value[field][0].dictItemCode
    cb && cb()
  })
}
const isShowDetail = ref(true)
const assessChange = val => {
  if (val == '1') {
    isShowDetailParams.value = false
    queryParams.value.phType = '0'
    isShowDetail.value = false
  } else {
    delete queryParams.value.phType
    isShowDetail.value = true
  }
}
const phTypeChange = val => {
  if (val == '0') {
    queryParams.value.assessObj = '0'
  } else {
    delete queryParams.value.assessObj
  }
}
const assessTypeChange = val => {
  if (val == '1') {
    delete queryParams.value.seismicInputMode
    delete queryParams.value.condition
    queryParams.value.year = 1
    isShowDetailParams.value && (dictData.value.damage = damageOption.value?.filter((_, index) => index > 0))
  } else {
    queryParams.value.seismicInputMode = '0'
    queryParams.value.condition = dictData.value.intensity[0].dictItemCode
    delete queryParams.value.year
    isShowDetailParams.value && (dictData.value.damage = damageOption.value)
  }
  isShowDetailParams.value && (queryParams.value.damageDegree = dictData.value.damage[0].dictItemCode)
}
const seismicInputModeChange = val => {
  if (val == '0') {
    getDictData('intensity', CODE.ld, 'condition')
  } else if (val == '1') {
    getDictData('probability', CODE.sgglsz, 'condition')
  }
}
const query = () => {
  paginationData.value.page = 1
  getList()
}
const reset = () => {
  if (activeName.value == '0') {
    proxy.$refs.buildingRef.resetFields()
    isShowDetailParams.value = false
  } else {
    proxy.$refs.lifelineRef.resetFields()
    queryParams.value.inputMethod = 1
  }
  queryParams.value.condition = dictData.value.intensity[0].dictItemCode
  query()
}
const getList = () => {
  // const { inputMethod, evaluationObject, condition } = queryParams.value
  // let params = activeName.value == '0' ? { ...queryParams.value } : { inputMethod, evaluationObject, condition }
  // condition不传参
  const { inputMethod, evaluationObject } = queryParams.value
  let params = activeName.value == '0' ? { ...queryParams.value } : { inputMethod, evaluationObject }
  let queryParamsObj = { ...params, ...paginationData.value }
  loading.value = true
  if (activeName.value == '0') {
    getPage(queryParamsObj).then(res => {
      dataList.value = res.data?.rows || []
      total.value = res.data?.total || 0
      loading.value = false
    }).catch(() => loading.value = false)
  } else {
    getLifePage(queryParamsObj).then(res => {
      dataList.value = res.data?.rows || []
      total.value = res.data?.total || 0
      loading.value = false
    }).catch(() => loading.value = false)
  }
}
// 导出
const exportResult = row => {
  if (activeName.value == '0') {
    //id;province;city;county;0评估/1区划dataType;区划方式qhType;assessType;assessObj;seismicInputMode;condition;year;
    const { assessAndQh, phType } = queryParams.value
    let data = { ...queryParams.value, dataType: assessAndQh, qhType: phType, id: row.id }
    proxy.download('assessReport/exportData', data, `${row.assessCode}-建筑物-评估结果.xlsx`)
  }else{
    proxy.hrefDownload({
    url: '/estimate/exportAllExcel',
    params: {
      taskId: row.id,
    },
    text: '正在导出excel文件...'
  })
    // proxy.hrefDownload({url:'/estimate/exportAllExcel', params:{ taskId: row.id }, text:`${row.code}-生命线-评估结果.xlsx`})
  }
}
const allDictArray = ref([])
const allDictArray1 = ref([])
//字典表查询
function getValidDictItems(dictCode) {
  //查询
  getValidDictItemsByDictCode('pgcd').then((response) => {
    nextTick(() => {
      let dictItems = response.data;
      let obj = {
        dictCode: dictCode,
        dictItems: dictItems
      };
      allDictArray.value.push(obj);
    });
  }).catch(err => {
  });
  getValidDictItemsByDictCode('sjd').then((response) => {
    nextTick(() => {
      let dictItems = response.data;
      let obj = {
        dictCode: dictCode,
        dictItems: dictItems
      };
      allDictArray1.value.push(obj);
    });
  }).catch(err => {
  });
}

onMounted(() => {
  getValidDictItems()
  getProvinceData()
  getDictData('intensity', CODE.ld, 'condition', getList)
})
</script>
<style scoped lang="scss">
.el-divider.el-divider--horizontal {
  margin: 10px 0;
}

.expand {
  .el-icon {
    transform: rotate(90deg);
  }
}

.demo-image .block {
  padding: 30px 0;
  border: 1px;
  text-align: center;
  // border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

// .demo-image .block:last-child {
//   border-right: none;
// }
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>